<template>
  <div class="">
    <div class="info-title">比赛报名</div>
    <el-card>
      <div slot="header">
        比赛报名信息填写
      </div>
      <el-steps :active="step" align-center>
        <el-step title="单位/参赛队信息登记"></el-step>
        <el-step title="选择项目组别及运动员"></el-step>
        <el-step title="发票信息填写"></el-step>
        <!-- <el-step title="付费及完成报名"></el-step> -->
      </el-steps>
      <el-form label-position="left" label-width="120px" class="form" :model="formStepOne" v-if="step==0">
        <el-form-item label="单位/队伍名称">
          <el-col :span="8">
            <el-input v-model="team.name" :disabled="true" placeholder="请输入单位/队伍名称"></el-input>
            <!-- {{ user }}/////{{ team }} -->
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="选择省份">
          <el-col :span="8">
            <el-select v-model="province" value-key="id">
              <el-option v-for="item in provinceArray"  :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-col>
        </el-form-item> -->
        <!-- 选择领队按钮 -->
        <el-form-item label="选择领队">
          <el-button @click="openLeader">添加</el-button>
        </el-form-item>
        <!-- 已选领队表格 -->
        <el-table :data="addLeaderList" v-if="addLeaderList.length>0" style="width: 100%;margin-bottom: 20px;">
          <el-table-column>
            <template slot-scope="scope">
              第{{ scope.$index + 1 }}领队
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="姓名"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="RemoveLeader(scope.$index, scope.row)">移除</el-button>


              <el-button icon="el-icon-sort-up" v-if="scope.$index != 0" circle @click="upMove(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-sort-down" v-if="scope.$index != addLeaderList.length - 1" circle @click="upDown(scope.$index,scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 选择教练按钮 -->
        <el-form-item label="选择教练">
          <el-button @click="openCoach">添加</el-button>
        </el-form-item>
        <!-- 已选教练表格 -->
        <el-table :data="addCoachList" v-if="addCoachList.length>0" style="width: 100%;margin-bottom: 20px;">
          <el-table-column>
            <template slot-scope="scope">
              第{{ scope.$index + 1 }}教练
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="姓名"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="RemoveCoach(scope.$index, scope.row)">移除</el-button>
              <el-button icon="el-icon-sort-up" v-if="scope.$index != 0" circle @click="upMoveCoach(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-sort-down" v-if="scope.$index != addCoachList.length - 1" circle @click="upDownCoach(scope.$index,scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 选择裁判按钮 -->
        <el-form-item label="选择裁判">
          <el-button @click="openReferee">添加</el-button>
        </el-form-item>
        <!-- 已选裁判表格 -->
        <el-table :data="addRefereeList" v-if="addRefereeList.length>0" style="width: 100%;margin-bottom: 20px;">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="姓名"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="RemoveReferee(scope.$index, scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 选择随队人员按钮 -->
        <el-form-item label="选择随队人员">
          <el-button @click="openOther">添加</el-button>
        </el-form-item>
        <!-- 已选随队人员表格 -->
        <el-table :data="addOtherList" v-if="addOtherList.length>0" style="width: 100%;margin-bottom: 20px;">
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="姓名"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="RemoveOther(scope.$index, scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div v-if="step==1">
        <div>
          <el-divider>新增项目报名</el-divider>
          <el-form  label-position="left" label-width="120px" class="form" :model="formStepTwo">
            <el-form-item label="选择大类">
              <el-col :span="16">
                <el-select v-model="formStepTwo.type" @change="getProject($event)">
                  <el-option v-for="item in typeArray"  :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="选择项目">
              <el-col :span="16">
                <el-select v-model="formStepTwo.projectId" @change="$forceUpdate()">
                  <el-option v-for="item in projectArray"  :key="item.id" :label="item.name" :value="item.id" @click.native="labelClick(item)"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="选择组别">
              <el-col :span="16">
                <el-select v-model="formStepTwo.groups">
                  <el-option v-for="item in groupArray"  :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <!-- 选择运动员按钮 -->
            <el-form-item label="选择运动员">
              <el-button :disabled="addAth" size="small" type="primary" @click="openAthlete">选择</el-button>
            </el-form-item>
            <!-- 已选运动员表格 -->
            <el-table :data="addAthleteList" ref="addAthleteTable" v-if="addAthleteList.length>0" style="width: 100%;margin-bottom: 20px;">
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="sex" label="性别"></el-table-column>
              <el-table-column prop="tel" label="电话"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="RemoveAthlete(scope.$index, scope.row)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 选择教练按钮 -->
            <el-form-item label="选择教练员">
              <el-button :disabled="addAth" size="small" type="primary" @click="openProjectCoach">选择</el-button>
            </el-form-item>
            <el-table :data="projectCoachs" ref="addCoachTable" v-if="projectCoachs.length>0" style="width: 100%;margin-bottom: 20px;">
              <el-table-column>
                <template slot-scope="scope">
                  第{{ scope.$index + 1 }}教练
                </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="sex" label="性别"></el-table-column>
              <el-table-column prop="tel" label="电话"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="RemoveProjectCoach(scope.$index, scope.row)">移除</el-button>
                    <el-button icon="el-icon-sort-up" v-if="scope.$index != 0" circle @click="upProjectMove(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-sort-down" v-if="scope.$index != projectCoachs.length - 1" circle @click="upProjecDown(scope.$index,scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-form-item label="提交本项报名">
              <el-col :span='11'>
                <el-button size="small" type="danger" :disabled="addAthleteList.length<1 || projectCoachs.length<1" @click="addProject()">提交本项报名</el-button>
              </el-col>
              <el-col :span='11'>
                <span>提交本项报名后即可继续添加报名项目</span>
              </el-col>
            </el-form-item>
            <el-divider>已报名项目</el-divider>
            <div>
              <el-table :key="num" :data="projects" v-if="projects.length>0" style="width: 100%;margin-bottom: 20px;">
                <el-table-column prop="type" label="大类"></el-table-column>
                <el-table-column prop="projectName" label="项目"></el-table-column>
                <el-table-column prop="groups" label="组别"></el-table-column>
                <el-table-column label="运动员" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <span style="margin-right: 5px;" v-for="item in scope.row.athletes">{{ item.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="RemoveProject(scope.$index, scope.row)">移除</el-button>
                    <el-button
                      size="mini"
                      type="primary"
                      @click="WatchProject(scope.$index, scope.row)">修改</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-form>
        </div>
        <div>
          <el-divider>住宿标准选择</el-divider>
          <el-form>
            <el-row>
              <el-col :span="8">
                <el-form-item label="住单人间的人数">
                  <el-input-number size="mini" v-model="singleRoomPresonSum"></el-input-number>&nbsp;&nbsp;人
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="住标间的人数">
                  <el-input-number size="mini" v-model="standardRoomPersonSum"></el-input-number>&nbsp;&nbsp;人
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="拼房选项">
                  <el-checkbox-group v-model="spellRooms" @change="spellRoom">
                    <el-checkbox v-for="item in checkList" :label="item" :value="item" :key="item"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <el-form  label-position="left" label-width="120px" class="form" :model="formStepThere" v-if="step==2">
        <el-alert
          title="请认真填写发票信息，组委会将按照此信息开具发票，如不需要发票可不填"
          type="error"
          style="margin-bottom: 15px;">
        </el-alert>
        <el-form-item label="发票抬头">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceTitle" placeholder="请输发票抬头"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="税号">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceTaxNumber" placeholder="请输税号"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="电话">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceTel" placeholder="电话"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceBankAddress" placeholder="请输地址"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="银行信息">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceBank" placeholder="请输银行信息"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-col :span="8">
            <el-input v-model="formStepThere.invoiceEmail" placeholder="请输入发票接受邮箱"></el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <!-- <el-form  label-position="left" label-width="120px" class="form" :model="form" v-if="step==3">
        444
      </el-form> -->

      <el-row>
        <el-col :span="12">
          <el-button :disabled="step==0" @click="step--">
            <i class="el-icon-d-arrow-left"></i>
            返回
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" v-if="step!=2" @click="step++">
            <i class="el-icon-d-arrow-right"></i>
            下一页
          </el-button>
          <el-button type="primary" v-if="step==2" @click="submit">
            保存
          </el-button>
        </el-col>
      </el-row>
      <!-- 添加领队弹框 -->
      <el-dialog  :close-on-click-modal="false" title="添加领队" :visible.sync="dialogFormAddLeader">
        <el-table ref="leaderList" :data="leaderList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionLeaderChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddLeader = false">取 消</el-button>
          <el-button type="primary" @click="addLeader()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加教练弹框 -->
      <el-dialog  :close-on-click-modal="false" title="添加教练" :visible.sync="dialogFormAddCoach">
        <el-table ref="coachList" :data="coachList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionCoachChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddCoach = false">取 消</el-button>
          <el-button type="primary" @click="addCoach()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog  :close-on-click-modal="false" title="添加项目教练" :visible.sync="dialogFormAddProjectCoach">
        <el-table ref="coachList" :data="coachList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionCoachChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddProjectCoach = false">取 消</el-button>
          <el-button type="primary" @click="addProjectCoach()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加裁判弹框 -->
      <el-dialog  :close-on-click-modal="false" title="添加裁判" :visible.sync="dialogFormAddReferee">
        <el-table ref="refereeList" :data="refereeList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionRefereeChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddReferee = false">取 消</el-button>
          <el-button type="primary" @click="addReferee()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加随队人员弹框 -->
      <el-dialog  :close-on-click-modal="false" title="添加随队人员" :visible.sync="dialogFormAddOther">
        <el-table ref="otherList" :data="otherList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionOtherChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddOther = false">取 消</el-button>
          <el-button type="primary" @click="addOther()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加运动员弹框 -->
      <el-dialog  :close-on-click-modal="false" title="添加运动员" :visible.sync="dialogFormAddAthlete">
        <h3>本项目限制人数{{ this.min }}-{{ this.max }}</h3>
        <el-table ref="athleteList" @select="select" :data="athleteList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionAthleteChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="tel" label="电话"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAddAthlete = false">取 消</el-button>
          <el-button :disabled="canAdd" type="primary" @click="addAthlete()">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog  :close-on-click-modal="false" title="修改项目" :visible.sync="outerVisible">
        <el-dialog  :close-on-click-modal="false"
          width="30%"
          title="更改运动员"
          :visible.sync="innerVisible"
          append-to-body>
          <h3>本项目限制人数{{ this.min }}-{{ this.max }}</h3>
          <el-table ref="athleteList" @select="select" :data="athleteList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionAthleteChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
          </el-table> 
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button :disabled="canAdd" type="primary" @click="saveEdit">保存修改</el-button>
          </div>
        </el-dialog>
        <el-dialog  :close-on-click-modal="false"
          width="30%"
          title="更改教练员"
          :visible.sync="innerCoachVisible"
          append-to-body>
          <el-table ref="coachList" @select="selectProjectCoach" :data="coachList" tooltip-effect="dark" style="width: 100%" @selection-change="selectionCoachChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
          </el-table> 
          <div slot="footer" class="dialog-footer">
            <el-button @click="innerCoachVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCoachEdit">保存修改</el-button>
          </div>
        </el-dialog>
          <el-form  label-position="left" label-width="120px" class="form" :model="project">
            <el-form-item label="选择大类">
              <el-col :span="16">
                <el-select v-model="project.type" @change="getProject($event)">
                  <el-option v-for="item in typeArray"  :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="选择项目">
              <el-col :span="16">
                <el-select v-model="project.projectId" @change="$forceUpdate()">
                  <el-option v-for="item in projectArray"  :key="item.id" :label="item.name" :value="item.id" @click.native="labelClick2(item)"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="选择组别">
              <el-col :span="16">
                <el-select v-model="project.groups" @change="$forceUpdate()">
                  <el-option v-for="item in groupArray"  :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-form>
          <el-button size="small" type="primary" @click="eidtAthlete">修改运动员</el-button>
          <el-table :data="project.athletes">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
          </el-table>
          <el-button size="small" type="primary" @click="editCoach">修改教练员</el-button>
          <el-table :data="project.projectCoachs">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button icon="el-icon-sort-up" v-if="scope.$index != 0 && flagProjectCoach" circle @click="upProjectCoachMove(scope.$index,scope.row)"></el-button>
                  <el-button icon="el-icon-sort-down" v-if="scope.$index != project.projectCoachs.length - 1 && flagProjectCoach" circle @click="upProjecCoachDown(scope.$index,scope.row)"></el-button>
                </template>
              </el-table-column>
          </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveProject">保存修改</el-button>
        </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import searchTable from '@/components/PublicTable/index.vue'
import {getTeamleaderList} from "@/api/teamleader";
import {getProjectInfo} from "@/api/competition";
import {getCoachList} from "@/api/coach";
import {getRefereeList} from "@/api/referee";
import {getTeamotherList} from "@/api/teamother";
import {getAthleteList} from "@/api/athlete";
import {saveApply,getApplyProject,getCompetitionType,getCompetitionGroup,getCompetitionProject} from "@/api/apply";
export default {
  components:{
    searchTable
  },
  data () {
    return {
      flagProjectCoach:false,
      indexId:null,
      outerVisible: false,
      innerVisible: false,
      innerCoachVisible:false,
      num:0,
      checkList:[
        '男','女'
      ],
      spellRooms:[],
      canAdd:true,
      addAth:true,
      canEdit:false,
      // 发票抬头
      invoice:'',
      // 税号
      taxNumber:'',
      // 地址
      address:'',
      // 银行信息
      bank:'',
      max:1,
      min:1,
      name:'',
      // province:'',
      competitionId:'',
      singleRoomPresonSum:0,
      standardRoomPersonSum:0,
      // 领队弹窗
      dialogFormAddLeader:false,
      // 领队列表
      leaderList:[],
      // 已选择领队
      addLeaderList:[],
      // 领队leaderIds
      leaderIds:[],
      // 领队选择框
      selectionLeaderList:[], 

      // 教练弹窗
      dialogFormAddCoach:false,
      dialogFormAddProjectCoach:false,
      // 教练列表
      coachList:[],
      // 已选择教练
      addCoachList:[],
      // 教练leaderIds
      coachIds:[],
      // 教练选择框
      selectionCocahList:[], 

      // 裁判弹窗
      dialogFormAddReferee:false,
      // 裁判列表
      refereeList:[],
      // 已选择裁判
      addRefereeList:[],
      // 裁判leaderIds
      refereeIds:[],
      // 裁判选择框
      selectionCocahList:[], 

      // 随队人员弹窗
      dialogFormAddOther:false,
      // 随队人员列表
      otherList:[],
      // 已选择随队人员
      addOtherList:[],
      // 随队人员leaderIds
      otherIds:[],
      // 随队人员选择框
      selectionOtherList:[], 

      // 运动员弹窗
      dialogFormAddAthlete:false,
      // 运动员列表
      athleteList:[],
      // 已选择运动员
      addAthleteList:[],
      // 运动员leaderIds
      athleteIds:[],
      // 以选择项目教练
      projectCoachs:[],
      projectCoachIds:[],
      projectCoachList:[],
      // 运动员选择框
      selectionAthleteList:[], 
      tableData: [],
      loading: false,
      tableRef: 'tableRef',
      searchForm: {},
      currentPage: 1,
      pageSizes: [10, 20, 50],
      pageSize: 10,
      total: 0,
      step:0,
      form:{
      },
      formStepOne:{},
      formStepTwo:{
        type:''
      },
      formStepThere:{
        invoiceTitle:'',
        invoiceTaxNumber:'',
        invoiceBankAddress:'',
        invoiceTel:'',
        invoiceBank:'',
        invoiceEmail:''
      },
      // formStepFour:{},
      // provinceArray:[
      //   '北京市', '天津市', '上海市', '重庆市', '黑龙江省', '吉林省', '辽宁省', '河北省',
      //   '山东省', '江苏省', '安徽省', '浙江省', '福建省', '广东省', '海南省', '云南省',
      //   '贵州省', '四川省', '湖南省', '湖北省', '河南省', '山西省', '陕西省', '甘肃省',
      //   '青海省', '江西省', '台湾省', '香港', '澳门', '新疆维吾尔自治区', '西藏自治区',
      //   '宁夏回族自治区', '内蒙古自治区','广西壮族自治区'
      // ],
      // 大类
      typeArray:[],
      // 项目
      projectArray:[],
      // 组别
      groupArray:[],
      projects:[],
      project:{}
    }
  },
  created() {
    this.getCompetitionId()
    // 获取大类
    this.getApplyInformation()
  },
  computed:{
    ...mapState({
      user:state => state.user.userInfo,
      team:state => state.user.teamInfo
    })
  },
  methods:{
    upMove(index, row) {
      if (index <= 0) {
        this.$message.error('不能继续向上移动')
      } else {
        const upData = this.addLeaderList[index - 1]
        this.addLeaderList.splice(index - 1, 1)
        this.addLeaderList.splice(index, 0, upData)
        this.leaderIds = this.addLeaderList.map(e => e.id)
      }
    },
    upDown(index, scope) {
      if (index === (this.addLeaderList.length - 1)) {
        this.$message.error('不能继续向下移动')
      } else {
        const downData = this.addLeaderList[index + 1]
        this.addLeaderList.splice(index + 1, 1)
        this.addLeaderList.splice(index, 0, downData)
        this.leaderIds = this.addLeaderList.map(e => e.id)
      }
    },
    upMoveCoach(index, row) {
      if (index <= 0) {
        this.$message.error('不能继续向上移动')
      } else {
        const upData = this.addCoachList[index - 1]
        this.addCoachList.splice(index - 1, 1)
        this.addCoachList.splice(index, 0, upData)
        this.coachIds = this.addCoachList.map(e => e.id)
      }
    },
    upDownCoach(index, scope) {
      if (index === (this.addCoachList.length - 1)) {
        this.$message.error('不能继续向下移动')
      } else {
        const downData = this.addCoachList[index + 1]
        this.addCoachList.splice(index + 1, 1)
        this.addCoachList.splice(index, 0, downData)
        this.coachIds = this.addCoachList.map(e => e.id)
      }
    },
    upProjectMove(index, row) {
      if (index <= 0) {
        this.$message.error('不能继续向上移动')
      } else {
        const upData = this.projectCoachs[index - 1]
        this.projectCoachs.splice(index - 1, 1)
        this.projectCoachs.splice(index, 0, upData)
        this.projectCoachIds = this.projectCoachs.map(e => e.id)
      }
    },
    upProjecDown(index, scope) {
      if (index === (this.projectCoachs.length - 1)) {
        this.$message.error('不能继续向下移动')
      } else {
        const downData = this.projectCoachs[index + 1]
        this.projectCoachs.splice(index + 1, 1)
        this.projectCoachs.splice(index, 0, downData)
        this.projectCoachIds = this.projectCoachs.map(e => e.id)
      }
    },
    upProjectCoachMove(index, row) {
      if (index <= 0) {
        this.$message.error('不能继续向上移动')
      } else {
        const upData = this.project.projectCoachs[index - 1]
        this.project.projectCoachs.splice(index - 1, 1)
        this.project.projectCoachs.splice(index, 0, upData)
        this.project.projectCoachIds = this.project.projectCoachs.map(e => e.id).toString()
        console.log(this.project.projectCoachIds,'mmp',this.project)
      }
    },
    upProjecCoachDown(index, scope) {
      if (index === (this.project.projectCoachs.length - 1)) {
        this.$message.error('不能继续向下移动')
      } else {
        const downData = this.project.projectCoachs[index + 1]
        this.project.projectCoachs.splice(index + 1, 1)
        this.project.projectCoachs.splice(index, 0, downData)
        this.project.projectCoachIds = this.project.projectCoachs.map(e => e.id).toString()
        console.log(this.project.projectCoachIds,'mmp',this.project)
      }
    },
    // 拼房
    spellRoom(e) {
      console.log(e)
    },
    // 限制运动员报名个数
    select(selection, row) {
    // console.log('当用户手动勾选数据行的 Checkbox 时触发的事件', selection, row)
    // 选择项大于2时
      if (selection.length > this.max) {
        let del_row = selection.shift();
        // console.log('把数组的第一个元素从其中删除后', selection);
        this.$refs.athleteList.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
      } else if (selection.length >= this.min) {
        this.canAdd = false
      } else {
        this.canAdd = true
      }
    },
    selectProjectCoach(selection, row) {
      console.log(selection)
    },
    getApplyInformation() {
      if(this.$route.params.applyId) {
        let params = this.$route.params.applyId
        getApplyProject(params).then(res => {
          this.leaderIds = res.data.leaderIds.split(',')
          this.coachIds = res.data.coachIds.split(',')
          this.refereeIds = res.data.refereeIds.split(',')
          this.otherIds = res.data.otherIds.split(',')
          
          getTeamleaderList().then(res => {
            this.leaderList = res.data.list
            this.addLeaderList = this.leaderList.filter(item => this.leaderIds.filter(e => e === item.id).length >0 )
          })
          getCoachList().then(res => {
            this.coachList = res.data.list
            this.addCoachList = this.coachList.filter(item => this.coachIds.filter(e => e === item.id).length >0 )
          })
          getRefereeList().then(res => {
            this.refereeList = res.data.list
            this.addRefereeList = this.refereeList.filter(item => this.refereeIds.filter(e => e === item.id).length >0 )
          })
          getTeamotherList().then(res => {
            this.otherList = res.data.list
            this.addOtherList = this.otherList.filter(item => this.otherIds.filter(e => e === item.id).length >0 )
          })

          this.formStepThere.invoiceTitle = res.data.invoiceTitle
          this.formStepThere.invoiceEmail = res.data.invoiceEmail
          this.formStepThere.invoiceBank = res.data.invoiceBank
          this.formStepThere.invoiceBankAddress = res.data.invoiceBankAddress
          this.formStepThere.invoiceTel = res.data.invoiceTel
          this.formStepThere.invoiceTaxNumber = res.data.invoiceTaxNumber
          this.singleRoomPresonSum = res.data.singleRoomPresonSum
          this.standardRoomPersonSum = res.data.standardRoomPersonSum
          this.competitionId = res.data.competitionId
          this.projects = res.data.projects
          this.spellRooms = res.data.pinFangType.split(',')
          this.name = res.data.name
          // this.province = res.data.province
        })
      } else {
        return
      }
    },
    labelClick(data) {
      this.max = data.athleteSumMax
      this.min = data.athleteSumMin
      this.addAth = false
    },
    labelClick2(data) {
      this.max = data.athleteSumMax
      this.min = data.athleteSumMin 
      this.project.projectId = data.id
      this.project.projectName = data.name
      this.addAth = false
    },
    persionLimt(e) {
      getProjectInfo(e).then(res => {
        this.max = res.data.athleteSumMax
        this.min = res.data.athleteSumMin
      })
    },
    addProject() {
      this.project = {}
      let athleteIds = this.addAthleteList.map(item => item.id)
      let projectCoachIds = this.projectCoachs.map(item => item.id)
      this.project.type = this.formStepTwo.type
      this.project.athletes = this.addAthleteList
      this.project.projectCoachs = this.projectCoachs
      this.project.projectId = this.formStepTwo.projectId
      this.project.projectName = this.projectArray.find(item => item.id == this.formStepTwo.projectId).name
      this.project.groups = this.formStepTwo.groups
      // this.project.athletes = this.editAthleteList
      this.project.athleteIds = athleteIds.toString()
      this.project.projectCoachIds = projectCoachIds.toString()
      this.projects.push(this.project)
      this.formStepTwo = {}
      this.addAthleteList = []
      this.projectCoachs = []
      this.addAth = true
    },
    WatchProject (index,row) {
      console.log(row)
      this.outerVisible = true
      this.getProject(row.type)
      // console.log(row)
      this.persionLimt(row.projectId)
      this.indexId = index
      this.project = row
      // this.project.type = row.type
      // this.project.projectId = row.projectId
      // this.project.projectName = row.projectName
      // this.project.groups = row.groups
      // this.project.athletes = row.athletes
      // this.projects[index] = this.project
    },
    saveProject() {
      this.flagProjectCoach = false
      this.outerVisible = false
      this.$set(this.projects, this.indexId, this.project);
      this.num++;
    },
    RemoveProject(index,row) {
      this.projects = this.projects.filter(item => item != row)
    },
    submit() {
      this.form.coachIds = this.coachIds.toString()
      this.form.coachs = this.addCoachList
      this.form.competitionId = this.competitionId
      this.form.leaderIds = this.leaderIds.toString()
      this.form.leaders = this.addLeaderList
      this.form.otherIds = this.otherIds.toString()
      this.form.refereeIds = this.refereeIds.toString()
      this.form.invoiceTitle = this.formStepThere.invoiceTitle
      this.form.invoiceEmail = this.formStepThere.invoiceEmail
      this.form.invoiceTaxNumber = this.formStepThere.invoiceTaxNumber
      this.form.invoiceBankAddress = this.formStepThere.invoiceBankAddress
      this.form.invoiceTel = this.formStepThere.invoiceTel
      this.form.invoiceBank = this.formStepThere.invoiceBank
      // this.form.competitionId = this.competitionId.toString()
      this.form.singleRoomPresonSum = this.singleRoomPresonSum
      this.form.standardRoomPersonSum = this.standardRoomPersonSum
      this.form.projects = this.projects
      this.form.name = this.team.name
      this.form.pinFangType = this.spellRooms.toString()
      // this.form.province = this.provin'ce
      // console.log('this.form',this.form)
      saveApply(this.form).then(res => {
        this.$router.push({name:'projectlist'})
      })
    },
    // table 数据转换
    // 获取比赛ID以及小类
    getCompetitionId(){
      this.competitionId = this.$route.params.id
      let params = {
        competitionId: this.competitionId
      }
      getCompetitionType(params).then(res => {
        this.typeArray = res.data
      })
      getCompetitionGroup(params).then(res => {
        this.groupArray = res.data
      })
    },
    getProject(value) {
      this.formStepTwo.projectId = ''
      let type = value
      let params = {
        competitionId: this.competitionId,
        type: type
      }
      getCompetitionProject(params).then(res => {
        this.projectArray = res.data
        this.addAth = false
      })
    },
    // 领队选择框
    selectionLeaderChange(val) {
      this.selectionLeaderList = []
      val.forEach(element => {
        this.selectionLeaderList.push(element.id)
      });
    },
    // 教练选择框
    selectionCoachChange(val) {
      this.selectionCoachList = []
      val.forEach(element => {
        this.selectionCoachList.push(element.id)
      });
    },
    // 裁判选择框
    selectionRefereeChange(val) {
      this.selectionRefereeList = []
      val.forEach(element => {
        this.selectionRefereeList.push(element.id)
      });
    },
    // 随队人员选择框
    selectionOtherChange(val) {
      this.selectionOtherList = []
      val.forEach(element => {
        this.selectionOtherList.push(element.id)
      });
    },
    // 运动员选择框
    selectionAthleteChange(val) {
      this.selectionAthleteList = []
      val.forEach(element => {
        this.selectionAthleteList.push(element.id)
      });
    },
    // 领队
    openLeader() {
      if(this.addLeaderList.length>0) {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getTeamleaderList(params).then(res => {
        this.leaderList = res.data.list
        this.leaderList = this.leaderList.filter( item =>{
          let idList = this.addLeaderList.map(e => e.id)
          return !idList.includes(item.id)
        })
        this.dialogFormAddLeader = true
        })
      } else {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getTeamleaderList(params).then(res => {
          this.leaderList = res.data.list
          this.dialogFormAddLeader = true
        })
      }
      
    },
    addLeader() {
      if(this.addLeaderList.length>0) {
        getTeamleaderList().then(res => {
          this.leaderList = res.data.list
          let ids = this.addLeaderList.map(item => {
            return item.id
          })
          ids.push(...this.selectionLeaderList)
          this.addLeaderList = this.leaderList.filter(item => ids.indexOf(item.id)!==-1)
          this.leaderIds = this.addLeaderList.map(e => e.id)
          this.dialogFormAddLeader = false
        })
      } else {
        this.addLeaderList = this.leaderList.filter(item => this.selectionLeaderList.indexOf(item.id)!=-1)
        this.leaderIds = this.addLeaderList.map(e => e.id)
        this.dialogFormAddLeader = false
      }
    },
    RemoveLeader(index,row) {
      this.addLeaderList = this.addLeaderList.filter(item => item.id != row.id)
      this.leaderIds = this.addLeaderList.map(e => e.id)
    },
    // 教练
    openCoach() {
      if(this.addCoachList.length>0) {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getCoachList(params).then(res => {
        this.coachList = res.data.list
        this.coachList = this.coachList.filter( item =>{
          let idList = this.addCoachList.map(e => e.id)
          return !idList.includes(item.id)
        })
        this.dialogFormAddCoach = true
        })
      } else {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getCoachList(params).then(res => {
          this.coachList = res.data.list
          this.dialogFormAddCoach = true
        })
      }
      
    },
    addCoach() {
      if(this.addCoachList.length>0) {
        getCoachList().then(res => {
          this.coachList = res.data.list
          let ids = this.addCoachList.map(item => {
            return item.id
          })
          ids.push(...this.selectionCoachList)
          this.addCoachList = this.coachList.filter(item => ids.indexOf(item.id)!==-1)
          this.coachIds = this.addCoachList.map(e => e.id)
          this.dialogFormAddCoach = false
        })
      } else {
        this.addCoachList = this.coachList.filter(item => this.selectionCoachList.indexOf(item.id)!=-1)
        this.coachIds = this.addCoachList.map(e => e.id)
        this.dialogFormAddCoach = false
      }
    },
    RemoveCoach(index,row) {
      this.addCoachList = this.addCoachList.filter(item => item.id != row.id)
      this.coachIds = this.addCoachList.map(e => e.id)
    },
    RemoveProjectCoach(index,row) {
      this.projectCoachs = this.projectCoachs.filter(item => item.id != row.id)
      this.projectCoachIds = this.projectCoachs.map(e => e.id)
      console.log('777',this.projectCoachs,this.projectCoachIds)
    },
    addProjectCoach() {
      if(this.projectCoachs.length>0) {
        getCoachList().then(res => {
          this.coachList = res.data.list
          let ids = this.projectCoachs.map(item => {
            return item.id
          })
          ids.push(...this.selectionCoachList)
          this.projectCoachs = this.coachList.filter(item => ids.indexOf(item.id)!==-1)
          this.projectCoachIds = this.projectCoachs.map(e => e.id)
          this.dialogFormAddProjectCoach = false
        })
      } else {
        this.projectCoachs = this.coachList.filter(item => this.selectionCoachList.indexOf(item.id)!=-1)
        this.projectCoachIds = this.projectCoachs.map(e => e.id)
        this.dialogFormAddProjectCoach = false
      }
    },
    openProjectCoach() {
      if(this.projectCoachs.length>0) {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getCoachList(params).then(res => {
        this.projectCoachList = res.data.list
        this.projectCoachList = this.projectCoachList.filter( item =>{
          let idList = this.projectCoachList.map(e => e.id)
          return !idList.includes(item.id)
        })
        this.dialogFormAddProjectCoach = true
        })
      } else {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getCoachList(params).then(res => {
          this.coachList = res.data.list
          this.dialogFormAddProjectCoach = true
        })
      }
    },
    // 裁判
    openReferee() {
      if(this.addRefereeList.length>0) {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getRefereeList(params).then(res => {
        this.refereeList = res.data.list
        this.refereeList = this.refereeList.filter( item =>{
          let idList = this.addRefereeList.map(e => e.id)
          return !idList.includes(item.id)
        })
        this.dialogFormAddReferee = true
        })
      } else {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getRefereeList(params).then(res => {
          this.refereeList = res.data.list
          this.dialogFormAddReferee = true
        })
      }
    },
    addReferee() {
      if(this.addRefereeList.length>0) {
        getRefereeList().then(res => {
          this.refereeList = res.data.list
          let ids = this.addRefereeList.map(item => {
            return item.id
          })
          ids.push(...this.selectionRefereeList)
          this.addRefereeList = this.refereeList.filter(item => ids.indexOf(item.id)!==-1)
          this.refereeIds = this.addRefereeList.map(e => e.id)
          this.dialogFormAddReferee = false
        })
      } else {
        this.addRefereeList = this.refereeList.filter(item => this.selectionRefereeList.indexOf(item.id)!=-1)
        this.refereeIds = this.addRefereeList.map(e => e.id)
        this.dialogFormAddReferee = false
      }
    },
    RemoveReferee(index,row) {
      this.addRefereeList = this.addRefereeList.filter(item => item.id != row.id)
      this.refereeIds = this.addRefereeList.map(e => e.id)
    },
    // 随队人员
    openOther() {
      if(this.addOtherList.length>0) {
      var params = {
        'pageNum': 1,
        'pageSize': 100,
      }
        getTeamotherList(params).then(res => {
        this.otherList = res.data.list
        this.otherList = this.otherList.filter( item =>{
          let idList = this.addOtherList.map(e => e.id)
          return !idList.includes(item.id)
        })
        this.dialogFormAddOther = true
        })
      } else {
        var params = {
          'pageNum': 1,
          'pageSize': 100,
        }
        getTeamotherList(params).then(res => {
          this.otherList = res.data.list
          this.dialogFormAddOther = true
        })
      }
      
    },
    addOther() {
      if(this.addOtherList.length>0) {
        getTeamotherList().then(res => {
          this.otherList = res.data.list
          let ids = this.addOtherList.map(item => {
            return item.id
          })
          ids.push(...this.selectionOtherList)
          this.addOtherList = this.otherList.filter(item => ids.indexOf(item.id)!==-1)
          this.otherIds = this.addOtherList.map(e => e.id)
          this.dialogFormAddOther = false
        })
      } else {
        this.addOtherList = this.otherList.filter(item => this.selectionOtherList.indexOf(item.id)!=-1)
        this.otherIds = this.addOtherList.map(e => e.id)
        this.dialogFormAddOther = false
      }
    },
    RemoveOther(index,row) {
      this.addOtherList = this.addOtherList.filter(item => item.id != row.id)
      this.otherIds = this.addOtherList.map(e => e.id)
    },
    eidtAthlete() {
      var params = {
        'pageNum': 1,
        'pageSize': 100,
      }
      getAthleteList(params).then(res => {
        this.athleteList = res.data.list
        this.innerVisible = true
        // this.project.athletes =[]
      })
    },
    editCoach() {
      this.flagProjectCoach = true
      var params = {
        'pageNum': 1,
        'pageSize': 100,
      }
      getCoachList(params).then(res => {
        this.coachList = res.data.list
        this.innerCoachVisible = true
        // this.project.athletes =[]
      })
    },
    // 运动员
    openAthlete() {
      var params = {
        'pageNum': 1,
        'pageSize': 100,
      }
      getAthleteList(params).then(res => {
        this.athleteList = res.data.list
        this.dialogFormAddAthlete = true
        this.addAthleteList = []
      })
    },
    saveEdit() {
      this.addAthleteList = this.athleteList.filter(item => this.selectionAthleteList.indexOf(item.id)!=-1)
      this.project.athletes = this.addAthleteList
      let athleteIds = this.project.athletes.map(item => item.id)
      this.project.athleteIds = athleteIds.toString()
      this.addAthleteList = []
      this.innerVisible = false
    },
    saveCoachEdit() {
      this.addCoachList = this.coachList.filter(item => this.selectionCoachList.indexOf(item.id)!=-1)
      this.project.projectCoachs = this.addCoachList
      let projectCoachIds = this.project.projectCoachs.map(item => item.id)
      this.project.projectCoachIds = projectCoachIds.toString()
      this.addCoachList = []
      this.innerCoachVisible = false
    },
    addAthlete() {
      if(this.addAthleteList.length>0) {
        getAthleteList().then(res => {
          this.athleteList = res.data.list
          let ids = this.addAthleteList.map(item => {
            return item.id
          })
          ids.push(...this.selectionAthleteList)
          this.addAthleteList = this.athleteList.filter(item => ids.indexOf(item.id)!==-1)
          this.dialogFormAddAthlete = false
        })
      } else {
        this.addAthleteList = this.athleteList.filter(item => this.selectionAthleteList.indexOf(item.id)!=-1)
        this.dialogFormAddAthlete = false
      }
    },
    RemoveAthlete(index,row) {
      this.addAthleteList = this.addAthleteList.filter(item => item.id != row.id)
    }
  }
}
</script>

<style>
.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.form {
  margin: 40px auto 20px;
}
.my-label {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
</style>
